<template>
    <div>
        <div style="text-align: left;margin-bottom: 50px;">
            <el-button @click="Add">新增</el-button>
            <el-button @click="Upt">修改</el-button>
            <el-button @click="Del">删除</el-button>
            <el-button @click="exceptExcel">导出</el-button>
            <el-button @click="reload">刷新</el-button>
        </div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="采购关联合同">
                <el-select v-model="formInline.PCId" style="width: 200px;" clearable>
                    <el-option v-for="item in tableData" :label="item.proContract" :value="item.purchaseContractsIds">{{
                        item.proContract }}</el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="供应商名称">
                <el-input v-model="formInline.Vname" placeholder="供应商名称" clearable />
            </el-form-item>
            <el-form-item>
                <el-button ty @click="GetList">查询</el-button>
            </el-form-item>
        </el-form>

        <h1 style="text-align: center;color: black;font-size:x-large;">质检申请列表</h1>
        <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="proContract" label="采购关联合同">
                <template v-slot="scoped">
                    <el-link type="primary" @click="GoToDetail">{{ scoped.row.proContract }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="qcCode" label="质检编号">
                <template v-slot="scoped">
                    <el-link type="primary" @click="GoToDetail">{{ scoped.row.qcCode }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="qcTopic" label="质检主题">
                <template v-slot="scoped">
                    <el-link href="#" type="warning" @click="GoToDetail"> {{ scoped.row.qcTopic }}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="vName" label="供应商名称" />
            <el-table-column prop="qcTime" label="质检时间">
                <template v-slot="scope">
                    {{ scope.row.qcTime.replace("T", " ").substring(0, 19) }}
                </template>
            </el-table-column>
        </el-table>
    </div>

    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" layout="total,slot,sizes"
                    :total="page.totalcount">
                    <span> , 每页 {{ page.pageSize }} 条，当前 {{ page.pageIndex }} / {{ page.pagecount }} 页</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="page.totalcount">
                    <el-button :disabled="page.pageIndex == 1" @click="page.pageIndex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize"
                    :page-sizes="[2, 4, 6, 8]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="page.totalcount">
                    <el-button :disabled="page.pageIndex == page.pagecount"
                        @click="page.pageIndex = page.pagecount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>
</template>

<script setup lang="ts">
import { reactive, ref, computed, watch, onMounted } from 'vue'
import axios from 'axios'
import { useRoute, useRouter } from 'vue-router'
import * as XLSX from 'xlsx';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
const route = useRoute()
const router = useRouter()
const tableData = ref([])
import http from '../../../http.js'

const formInline = reactive({
    Vname: '',
    PCId: ''
})

const page = reactive({
    pageIndex: 1,
    pageSize: 15,
    totalcount: 0,
    pagecount: 0
})
const Pcont = ref([])
const GetPCount = () => {
    axios.get(http.zblnb + "/cg/api/Quality/ShowProPcApply").then(res => {
        Pcont.value = res.data.data
    })
}

watch(page, () => {
    GetList()
})

const reload = () => {
    window.location.reload()
}


//跳转添加
const Add = () => {
    router.push('/AddPurApp')
}



const GoToDetail = () => {
    router.push('/ShowPurchaseContracts')
}
//获取复选框值
const sel = ref([])
const handleSelectionChange = (val: any) => {
    console.log(val)
    sel.value = val;
}

//删除
const Del = () => {
    if (sel.value.length == 0) {
        ElMessage.error("请选择要删除的采购申请")
        return
    }

    ElMessageBox.confirm(
        '确定删除吗?',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            var wid = sel.value.map(ele => ele.proApplyId)
            var id = {
                ids: wid
            }
            axios.put(http.zblnb + "/cg/api/Quality/DelProPcApply", id).then(res => {
                if (res.data.data > 0) {
                    ElMessage.success("删除成功")
                    GetList()

                } else {
                    ElMessage.error("删除失败")
                }
            })
        })
        .catch(() => {

        })

}

const GetList = () => {
    axios.get(http.zblnb + "/cg/api/Quality/ShowProPcApply", {
        params: {
            pageIndex: page.pageIndex,
            pageSize: page.pageSize,
            PCId: formInline.PCId || "",
            Vname: formInline.Vname || "",
        }
    }).then(res => {
        console.log(res.data.data)
        tableData.value = res.data.data.list
        page.pagecount = res.data.data.pagecount
        page.totalcount = res.data.data.totalcount
    })
}


const Upt = () => {
    var id = sel.value.map(ele => ele.proApplyId)
    router.push('/UptPurApp?id=' + id)
}

//导出
const exceptExcel = () => {
    ElMessageBox.confirm("是否确认导出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
    })
        .then((response) => {
            //  this.selectdata 是复选框的 数据列表
            if (sel.value.length <= 0) {
                ElMessage.warning('请选择数据！');
                return;
            }
            let tableData = [
                ['序号', '采购关联合同', '质检编号', '质检主题', '供应商名称', '质检时间']
            ] // 表格表头
            sel.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.proContract,
                    item.qcCode,
                    item.qcTopic,
                    item.vName,
                    item.spcArrivalDate,

                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '仓库分类') // 工作簿名称
            let name = '仓库分类管理' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}

onMounted(() => {
    GetList()
    GetPCount()
})
</script>

<style scoped></style>